<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormProps } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('right')
const codeUrl = ref('/api/user/code')
const formLabelAlign = reactive({
  name: '',
  password: '',
  code: '',
})

// 登录校验:
function login() {
  fetch('/api/user/create', {
    method: 'POST',
    body: JSON.stringify(formLabelAlign),
    headers: {
      'Content-Type': 'application/json',
    },
  }).then(res => res.json()).then((res) => {
    if (res.code === 200) {
      console.log('登录成功')
    }
    else {
      console.log(res.msg)
    }
  })
}

function resetCode() {
  codeUrl.value = `${codeUrl.value}?t=${Math.random()}`
}
</script>

<template>
  <el-form
    :label-position="labelPosition"
    label-width="auto"
    :model="formLabelAlign"
    style="max-width: 600px"
  >
    <el-form-item label="账号">
      <el-input v-model="formLabelAlign.name" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="formLabelAlign.password" />
    </el-form-item>
    <el-form-item label="验证码">
      <div class="flex">
        <el-input v-model="formLabelAlign.code" />
        <img class="code-img" :src="codeUrl" alt="" @click="resetCode">
      </div>
    </el-form-item>
  </el-form>

  <el-button type="primary" @click="login">
    登录
  </el-button>
</template>

<style lang="less" scoped>
.code-img {
  width: 100px;
  height: 40px;
}
</style>
